<template>
  <div id="preach">
    <div class="banner">
      <el-image style="width: 100%; height:400px; position: relative;top:-4px;" :src="bannerUrl" fit="fit"></el-image>
    </div>
    <el-row style="min-height:65px;margin-top:30px">
      <el-col :span="5">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <PreachSearch @searchVideo="getVideoName" @getLiveName="getLiveName" ></PreachSearch>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row style="min-height:65px;margin-top:20px">
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="18">
        <div class="preach_content">
          <div class="video" >
            <div class="preach_title">视频宣讲</div>
            <el-divider></el-divider>
            <div class="video_item" v-for="video in videoList" :key="video.videoId" @click="goPreachVideoDetail(video.videoId)">
              <el-image style="height:150px;width:268px"
                  :src="video.coverUrl"
                  fit="fit"></el-image>
              <el-avatar shape="square" style="color: #fff;font-weight: 600;background: #409EFF;margin-left: 8px;">
                {{video.institutions}}</el-avatar>
              <div class="content_right">
                <div class="title">{{video.videoTitle}}</div>
                <div class="introduce">{{video.videoIntroduce}}</div>
              </div>

            </div>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="video_total"
                align="center"
                @current-change="videoHandleCurrentChange"
                :current-page="video_currentPage"
                :page-size="video_pageSize"
                :hide-on-single-page="video_value"
                style="padding-top: 15px"
            >
            </el-pagination>
          </div>
          <div class="live">
            <div class="preach_title">直播宣讲</div>
            <el-divider></el-divider>
            <div class="live_item" @click="goPreachLiveDetail(live.liveId)" v-for="live in liveList" :key="live.liveId">
              <span class="tag">{{ live.beginTime }}</span>
              <el-image
                  :src="live.coverUrl" style="height:150px;width:268px"
                  fit="fit"></el-image>
              <el-avatar shape="square" style="color: #fff;font-weight: 600;background: #409EFF;margin-left: 8px;">
                {{ live.institutions }}</el-avatar>
              <div class="content_right">
                <div class="title">{{live.liveTitle}}</div>
                <div class="introduce">{{ live.liveIntroduce }}</div>
              </div>
            </div >

            <el-pagination
                background
                layout="prev, pager, next"
                :total="live_total"
                align="center"
                @current-change="liveHandleCurrentChange"
                :current-page="live_currentPage"
                :page-size="live_pageSize"
                :hide-on-single-page="live_value"
                style="padding-top: 15px"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import preach from '@/assets/img/preach.png'
import PreachSearch from "@/components/common/PreachSearch";
import {getLiveList, getVideoList} from "@/network/recruit";

export default {
  name: "Preach",
  components: {
    PreachSearch,
  },
  data() {
    return {
      bannerUrl: preach,
      live_value:true,
      live_currentPage:1,
      live_total:1000,
      live_pageSize:30,
      video_value:true,
      video_currentPage:1,
      video_total:0,
      video_pageSize:30,
      searchV:'',
      videoList:[],
      searchL:'',
      liveList:[],
    }
  },
  mounted() {
    this.createVideoList();
    this.createLiveList();
  },
  methods:{
    liveHandleCurrentChange(currentPage){
      this.live_currentPage = currentPage;
    },
    videoHandleCurrentChange(currentPage){
      this.video_currentPage = currentPage;
    },
    goPreachLiveDetail(liveId){
      this.$router.push({name:'preachLiveDetail',params:{liveId:liveId}});
    },
    goPreachVideoDetail(videoId){
      this.$router.push({name:'preachVideoDetail',params:{videoId:videoId}});
    },
    getVideoName(data){
      this.searchV = data;
      this.createVideoList();
    },
    createVideoList(){
      getVideoList(this.searchV,this.video_currentPage,this.video_pageSize).then(res=>{
       this.videoList = res.data.data.list;
        this.video_total = res.data.data.total;
      })
    },
    getLiveName(data){
      this.searchL = data;
      this.createLiveList();
    },
    createLiveList(){
      getLiveList(this.searchL,this.live_currentPage,this.live_pageSize).then(res=>{
        this.liveList = res.data.data.list;
        this.live_total = res.data.data.total;
      })
    }
  }
}
</script>

<style scoped>
.banner {
  height: 400px;
}

.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

.preach_title {
  font-size: 24px;
  color: #100f0f;
  height: 60px;
  line-height: 60px;
  text-align: left;
}

.el-divider--horizontal {
  margin: 0 16px 20px 0;
  width: 98%;
}

.live_item {
  display: inline-block;
  margin: 0 16px 16px 0;
  background-color: white;
  width: 268px;
  height: 205px;
  cursor: pointer;
  position: relative;
}

.live_item:hover:before {
  z-index: 1;
}

.live_item:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 55px;
  right: 0;
  z-index: 0;
  background: rgba(0, 0, 0, .5);
  transition: background .2s linear;
}

.live_item:hover:after {
  opacity: 1;
}

.live_item:after {
  content: ' ';
  position: absolute;
  width: 80px;
  height: 80px;
  top: 32px;
  left: 50%;
  margin-left: -40px;
  background: url(../../assets/img/play.png) center center/100%;
  z-index: 4;
  opacity: 0;
  transition: all .2s linear;
}

.tag{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: #58b9fd;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  line-height: 16px;
  padding: 3px 5px;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.video_item {
  display: inline-block;
  margin: 0 16px 16px 0;
  background-color: white;
  width: 268px;
  height: 205px;
  cursor: pointer;
  position: relative;
}

.video_item:hover:before {
  z-index: 1;
}

.video_item:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 55px;
  right: 0;
  z-index: 0;
  background: rgba(0, 0, 0, .5);
  transition: background .2s linear;
}

.video_item:hover:after {
  opacity: 1;
}

.video_item:after {
  content: ' ';
  position: absolute;
  width: 80px;
  height: 80px;
  top: 32px;
  left: 50%;
  margin-left: -40px;
  background: url(../../assets/img/play.png) center center/100%;
  z-index: 4;
  opacity: 0;
  transition: all .2s linear;
}

.content_right {
  display: inline-block;
  width: 200px;
  margin-left: 5px;
}

.title {
  display: inline-block;
  width: 200px;
  font-size: 13px;
  font-weight: 500;
  color: #414a60;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.introduce {
  display: inline-block;
  width: 200px;
  font-weight: 400;
  color: #898e9d;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
  font-size: 12px;
}
/deep/ .el-pagination.is-background .el-pager li{
  background-color:white;
}
/deep/ .el-pagination.is-background .btn-next{
  background-color:white;
}
/deep/ .el-pagination.is-background .btn-prev{
  background-color:white;
}
</style>